<template>
	<div class="login_contail">
		<div class="login_content">
			<!-- 头像区域 -->
			<div class="login_image">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 登录表单区域  v-bind动态绑定属性model(数据对象属性)Formdata-->
			<el-form  label-width="0px" class="form_content" :model="Formdata" :rules="FormdataRules"  ref="FormdataRef">
				<!-- 输入框区域 -->
			  <el-form-item prop="username">
				  <!-- main.js中引入自己下载好的字体图标iconfont.css，然后打开demo_fontclass.html页面，找到自己想要的字体图标iocn -->
			    <el-input prefix-icon="iconfont icon-user" v-model="Formdata.username"></el-input>
			  </el-form-item>
			  <el-form-item prop="password">
			    <el-input prefix-icon="iconfont icon-3702mima"  v-model="Formdata.password" type="password"></el-input> <!-- type="password表示把类型转换成密码型，数字将会被点代替 -->
			  </el-form-item>
				<!-- 按钮区域 -->
				<el-form-item class="form_btn">
					<el-button class="form_button" type="primary"  @click="loginForm">登录</el-button>
					<el-button class="form_button" type="info" @click="resetForm('FormdataRef')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				// 这是登录表单的数据绑定对象
				Formdata:{
					username:'admin',
					password:'123456'
				},
				//这是登录表单的验证规则对象
				// Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
				FormdataRules:{
					uname:[
						 { required: true, message: '请输入用户名称', trigger: 'blur' },
						 { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6到 15个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			// 表单重置  el-form中需要ref获取引用对象  this就是当前页面的表单组件login.vue这个实例对象 this.$refs[formName]就是表单实例对象el-form
			// resetFields 重置
			 resetForm(formName) {
			        this.$refs[formName].resetFields();
			      },
			//表单预验证  el-form中需要ref获取引用对象
			// validate 验证  Function(callback: Function(boolean, object))   validate(回调函数，布尔值)
			loginForm(){
												// 一
				this.$refs.FormdataRef.validate(async valid=>{
					// 要使用axios发送请求，需要先下载axios开发依赖，然后main.js中全局配置axios
					// 如果为假false  则不发送axios请求
												// 二
					if (!valid) return;
					// 验证成功为真，则发送axios请求 返回的是一个pormise对象，需要await
					let {data:res} =await this.$http.post('login',this.Formdata)
					// console.log(data.data)
					if (res.meta.status != 200) return this.$message.error('登录失败')
					this.$message.success('登录成功')
												// 三
					// 登录成功后的token保存在客户端的sessionStorage中
					window.sessionStorage.setItem("token",res.data.token)
					//通过编程式导航跳转到后台主页，路由地址是/home
					this.$router.push('/home')
					
					//1. localStorage是本地持久化存储     sessionStorage是浏览器会话期间存储
					//2. 为什么要保存token
							// 2.1 原因是：项目中除了登录之外的其他API接口，必须在登录之后才能访问；
							// 2.2另外：token只应在当前网页打开期间生效，所以将token保存在sessionStorage中
				});
			}
		}
	}
</script>

<!-- 1.绑定表单数据
		在表单上绑定     动态绑定属性:model  ，javascript中返回绑定值，输入框中双向绑定对象属性  -->
<style lang="less" scoped>
	// 先在assets公共目录中新建goble.css给html和body和app给高度为100%，然后设置login_contail的高度为100%，盒子就撑开了，外面的颜色就沾满整个屏幕
	.login_contail{
		height: 100%;
		background-color: #2b4b6b;
	}
	.login_content{
		height: 300px;
		width: 500px;
		background-color: white;
		border-radius: 5px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		.login_image{
			height: 100px;
			width: 100px;
			border: 1px solid white;
			border-radius: 50%;
			padding: 10px;
			position: absolute;
			left: 50%;
			top: 0%;
			transform: translate(-50%,-50%);
			background-color: #FCFFFC;
			box-shadow: 0 0 15px;
			img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color:#ECEEEB ;
			}
		}
		.form_content{
			padding: 100px 10px 0px 10px;
			width: 100%;
			box-sizing: border-box;
			/* 按钮右边对齐，则设置为横轴弹性布局，然后尾部对齐，就靠右边了 */
			.form_btn{
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>
